<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item @change="priceChange" title="价格" v-model="priceOrderVal" :options="priceOption" />
      <van-dropdown-item @change="categoryChange" title="分类" v-model="categoryVal" :options="filterCategory" />
    </van-dropdown-menu>
    <!-- 这里 v-if 和 v-else 必须写在一起，否则不起作用 -->
    <van-empty v-if="goodsList.length === 0" image="search" description="搜索不到你想要的产品..." />
    <Products
      v-else
      :goodsList="goodsList">
    </Products>
  </div>
</template>

<script>
import Products from '@/components/Products.vue'
export default {
  name: 'SearchProducts',
  components: {
    Products
  },
  props: ['filterCategory', 'goodsList'],
  data () {
    return {
      priceOrderVal: '',
      categoryVal: 0, // 这个的值表示哪一项，就表示哪一项被勾上
      priceOption: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' }
      ]
    }
  },
  computed: {},
  created () {},
  mounted () {},
  beforeUpdate () {
    // 数据挂载完毕之后，需要遍历 filterCategory 数组，看看哪一项的 checked 为 true
    // 将 checked 为 true 的选项的 value 赋值给 categoryVal
    // ! 由于数据是根据 onSearch() 按了回车后进行了更新，在 mounted 里面是没有办法获取到的
    // * 解决方法是：1.mounted 里面加入 setTimeout()；2.写在 beforeUpdate 里面；3.在 watch 里面进行数据监听
    this.filterCategory.map(item => {
      // 如果 item 的 checked 为 true，改变 this.categoryVal
      if (item.checked) {
        this.categoryVal = item.value
      }
    })
  },
  watch: {},
  methods: {
    categoryChange (value) {
      // 分类选择 改变函数，value 为选择的 value 值
      this.$emit('categoryChange', value) // 通过 this.$emit() 实现子组件给父组件传递方法
    },
    priceChange (value) {
      // 价格排序改变 改变函数，value 为选择的 value 值
      this.$emit('priceChange', value) // 通过 this.$emit() 实现子组件给父组件传递方法
    }
  }
}
</script>

<style lang='less'>
.van-dropdown-menu__bar{
  background-color: #cccccc !important;
}
</style>
